<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">配送商 {{ distributorInfo?.distributeName }}</span>
          <el-tag
            v-if="distributorInfo"
            type="warning"
          >
            <credit-status
              :data="distributorInfo"
              types="detail"
            />
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="handlBack"
        >返回</el-button>
        <template v-if="distributorInfo?.creditInfo">
          <el-button
            v-auth="{v:['crm:internalControl:finance:credit'], bool: distributorInfo.creditInfo.creditStatus==='1'}"
            type="primary"
            class="main-btn"
            size="small"
            @click="creditSetting"
          >调整信用</el-button>
        </template>
        <template v-if="distributorInfo?.creditInfo===null||distributorInfo?.creditInfo&&distributorInfo?.creditInfo?.creditStatus!=='1'">
          <el-button
            v-auth="{v:['crm:internalControl:finance:credit']}"
            type="primary"
            class="main-btn"
            size="small"
            @click="creditSetting"
          >设置信用</el-button>
        </template>
      </template>
    </header-module>
    <div class="main-content">
      <item-title title="信用信息" />
      <el-form
        class="form-detailData"
        label-position="right"
        label-width="160px"
        inline
        :model="distributorInfo"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="配送商编号：">
              <div>{{ distributorInfo?.distributeNo || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配送商名称：">
              <div>{{ distributorInfo?.distributeName || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业所在地区：">
              <div>{{ distributorInfo?.provinceName }} / {{ distributorInfo?.cityName }} / {{ distributorInfo?.areaName }}</div>
            </el-form-item>
          </el-col>
          <template v-if="distributorInfo?.creditInfo">
            <el-col :span="8">
              <el-form-item label="应收最大额度：">
                <div><span>{{ distributorInfo?.creditInfo?.quota > 0 ? distributorInfo?.creditInfo?.quota : '不限额' }}</span><span v-if="distributorInfo?.creditInfo?.quota > 0">元</span></div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="进销存允许最大库存："
                style="width: 100%"
              >
                <div class="stock">
                  <el-table
                    :data="listData"
                    :border="true"
                    stripe
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="productPopularName"
                      label="通用名"
                      :min-width="140"
                      show-overflow-tooltip
                      header-align="center"
                    >
                      <template #default="scope">
                        {{ scope.row.productInfoDetail.productPopularName }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="approvalNumber"
                      label="批准文号"
                      :min-width="130"
                      show-overflow-tooltip
                      header-align="center"
                    >
                      <template #default="scope">
                        {{ scope.row.productInfoDetail.approvalNumber }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="packSpecs"
                      label="包装规格"
                      :min-width="100"
                      show-overflow-tooltip
                      header-align="center"
                    >
                      <template #default="scope">
                        {{ scope.row.productInfoDetail.packSpecs }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="producer"
                      label="生产厂家"
                      :min-width="100"
                      show-overflow-tooltip
                      header-align="center"
                    >
                      <template #default="scope">
                        {{ scope.row.productInfoDetail.producer }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="sellUnit"
                      label="计价单位"
                      header-align="center"
                      align="center"
                      :min-width="100"
                      show-overflow-tooltip
                    >
                      <template #default="scope">
                        {{ getLabel('sell_unit',scope.row.productInfoDetail.sellUnit) }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="capacity"
                      label="允许最大库存上限"
                      header-align="center"
                      :min-width="140"
                    >
                      <template #default="scope">
                        <div>
                          <span v-if="scope.row.capacity ===0">不限</span>
                          <span v-else>{{ scope.row.capacity }}</span>
                        </div>
                      </template>
                    </el-table-column>

                  </el-table>
                  <Pagination
                    v-if="total>20"
                    v-model:page="filterData.page"
                    v-model:limit="filterData.pageSize"
                    style="display: flex; justify-content: flex-end"
                    :total="total"
                    @pagination="getList"
                  />
                </div>
              </el-form-item>
            </el-col>
          </template>
          <el-col
            v-else
            :span="24"
          >
            <div
              class="img-container"
              style="display:flex;flex-direction:column;justify-content:center;align-items:center"
            >
              <div class="img-container">
                <img src="@CRM/assets/img/no_setting_credit.png">
              </div>
              <span style="color: #666">未设置信用</span>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div
        v-if="distributorInfo?.creditInfo"
        class="history-list"
        style="margin-top: 20px"
      >
        <item-title title="调整记录" />
        <operation-view
          :id="distributorInfo?.creditInfo?.id"
          mode="credit"
        />
      </div>
    </div>
    <credit-setting
      ref="creditSettingRef"
      :mode-id="distributorInfo?.id"
      mode="distribute"
      @on-success="updateDetail"
    />
  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  components: {
    creditStatus: defineAsyncComponent(() =>
      import('../modules/creditStatus.vue')
    ),
    creditSetting: defineAsyncComponent(() =>
      import('@CRM/views/commonView/creditManagement/modules/creditSetting.vue')
    ),
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    const state = reactive({
      id: Number(route.query.id),
      distributorInfo: null,
      listData: [],
      total: 0,
      filterData: {
        page: 1,
        pageSize: 20,
      },
      creditSettingRef: null,
    })

    // 返回
    const handlBack = () => {
      router.back()
    }

    const getDetail = () => {
      api.internalControl
        .INTERNAL_CONTROL_FINANCE_CREDIT_DETAIL({ distributeId: state.id })
        .then((res) => {
          if (res.code === 0) {
            state.distributorInfo = res.data.data
          }
        })
    }

    const getCreditProductList = () => {
      api.common
        .CREDIT_PRODUCT_LIST({
          relationId: state.id,
          creditType: 'distribute',
        })
        .then((res) => {
          if (res.code === 0) {
            state.listData = res.data.list
            state.total = res.data.total
            state.quota = res.data.quota
          }
        })
    }
    const creditBtn = (flowStatus) => {
      var bool = false
      if (flowStatus === 'DOING') {
        currentInstance.proxy.customMessage({
          type: 'warning',
          message: '您的信用正在审核，暂不支持调整',
        })
        bool = true
      }
      return bool
    }
    const creditSetting = () => {
      var types = 'create'
      // 判断是否可以调整信用
      if (state.distributorInfo.creditInfo === null) {
        types = 'create'
      } else {
        var bool = creditBtn(state.distributorInfo.creditInfo.flowStatus)
        if (state.distributorInfo.creditInfo.creditStatus === '-1') {
          if (!bool) {
            types = 'edit'
          } else {
            return
          }
        } else if (state.distributorInfo.creditInfo.creditStatus === '1') {
          if (!bool) {
            types = 'change'
          } else {
            return
          }
        } else {
          currentInstance.proxy.customMessage({
            type: 'warning',
            message: '你暂时不符合信用调整的条件',
          })
          return
        }
      }
      state.creditSettingRef.open({
        types: types,
        modeId: state.distributorInfo?.id,
        creditDetail: state.distributorInfo?.creditInfo,
      })
    }

    const updateDetail = () => {
      getDetail()
      getCreditProductList()
    }

    onMounted(() => {
      getDetail()
      getCreditProductList()
    })

    return {
      ...toRefs(state),
      handlBack,
      creditSetting,
      updateDetail,
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
